<template>
	<view class="box-wp" v-if="list.length>0">
		<view class="item" v-for="(info,index) in list" :key="index">
			<view class="main">
				<view class="left">
					<u--image :src="info.pic" width="160rpx" height="160rpx" mode="aspectFill"></u--image>
				</view>
				<view class="right goods">
					<view class="title u-line-1">
						{{info.prodName}}
					</view>
					<view class="cont-price">
						<view class="goods-price" v-if="info.price||info.price===0">
							￥{{info.price}}
						</view>
						<view class="goods-tag" v-if="info.voucher==1">
							可用代金券
						</view>
					</view>
					<view class="option-btn-wp">
						<view class="option-btn" @click.stop="goToShare(info)">
							赠送
						</view>
						<view class="option-btn" @click.stop="goToEdit(info)">
							编辑
						</view>
						<view class="option-btn" @click.stop="delMyGoods(info)">
							删除
						</view>

					</view>

					<img
						src="https://file.casugn.com/storecompcard//OlMfWSvcuquaba3673daf56a79af0ec2da78d9da1fa4_1715677035118.png"
						@click="getGoodsCode(info)" class="codes" alt="" />

				</view>
			</view>

		</view>
		<u-popup :show="visible" mode="center" round="16rpx" :safeAreaInsetBottom="false" @close="hide">
			<u-image width="280rpx" height="280rpx" radius="14rpx" :src="qrcodeImg">
				<template slot="loading">
					<u-loading-icon></u-loading-icon>
				</template>
			</u-image>
		</u-popup>
	</view>
	<u-empty marginTop="50" mode="list" textSize="30" iconSize="70" v-else>
	</u-empty>

</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				loading: false,
				qrcodeImg: '',
				list: [],
				pageNo: 1,
				total: 0,
				pageSize: 10,
			}
		},
		props: {
			openId: {
				required: true,
				type: String
			}
		},
		// created() {
		// 	this.getList(1)
		// },
		methods: {
			hide() {
				this.visible = false
			},
			getGoodsCode(info) {
				this.visible = true
				let params = {
					page: 'pagesMall/mallCenter/order',
					scene: info.id,
					check_page: false
				}
				this.loading = true
				this.$api.getPhotoUrl(params)
					.then((res) => {
						if (res.success) {
							this.qrcodeImg = res.result
						} else {
							this.visible = false
							uni.$u.toast(res.message)
						}
					}).finally(() => {
						this.loading = false
					})
			},
			goToShare(item) {
				uni.navigateTo({
					url: `/pagesMall/mallCenter/mallCenterDetail?id=${item.id}&hiddenBuyBtn=1&openId=${this.openId}`
				})
			},
			async getList(arg) {
				uni.showLoading({})
				if (arg == 1) {
					this.pageNo = 1
					this.list = []
					this.total = 0
				}

				let {
					openid
				} = uni.getStorageSync('openId')

				let res = await this.$api.getGoodsList({
					openId: openid,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: 1
				})
				if (res.success) {
					console.log(res.result.records);
					this.list = [...this.list, ...res.result.records]
					this.total = res.result.total
				} else {
					this.list = []
					this.total = 0
				}
				uni.hideLoading()
			},
			reachBottom() {
				if (this.pageNo * this.pageSize > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				} else {
					this.pageNo++
					this.getList()
				}
			},
			goToDetail({
				id
			}) {
				uni.navigateTo({
					url: `/pagesMall/myShop/myShopDetail?id=${id}`
				})
			},
			goToEdit(info) {
				console.log(info);
				uni.navigateTo({
					url: `/pagesMall/myShop/myShopEditGoods?id=${info.id}`
				})
			},
			delMyGoods({
				id
			}) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该商品',
					success: async (modal) => {
						if (modal.confirm) {
							let res = await that.$api.delMyGoods(
								id
							)
							if (res.success) {
								uni.showToast({
									icon: 'none',
									title: '删除成功'
								})
								setTimeout(() => {
									that.getList(1)
								}, 1000)

							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						}
					}
				});


			},


		}
	}
</script>

<style lang="scss" scoped>
	.box-wp {
		overflow: auto;
		background-color: #f7f8fa;
		min-height: 100vh;

		.item {
			border-radius: 16rpx;
			background-color: #fff;
			margin: 32rpx;
			padding: 20rpx;

			.main {
				display: flex;
				justify-content: space-between;

				.left {
					margin-top: 5rpx;
					margin-right: 32rpx;

					image {
						border-radius: 5rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}

				.right {
					flex: 1;
					position: relative;

					.codes {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 10rpx;
						right: 10rpx;
					}

					.title {
						overflow: hidden;
						width: 400rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
					}

					.cont-price {

						height: 70rpx;
						display: flex;
						align-items: center;

						.count {
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 39rpx;
						}

						.goods-tag {
							border-radius: 6rpx;
							border: 1rpx solid #FF7D00;
							padding: 4rpx 10rpx;
							margin-left: 20rpx;
							text-align: center;
							width: 100rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #FF7D00;
							line-height: 28rpx;

						}

						.goods-price {
							color: #FF3131;
							font-size: 34rpx;
						}
					}

					.option-btn-wp {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.option-btn {
							text-align: center;
							width: 112rpx;
							height: 48rpx;
							border-radius: 200rpx 200rpx 200rpx 200rpx;
							opacity: 1;
							border: 2rpx solid #86909C;
							font-size: 24rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 48rpx;
							margin-left: 20rpx;

						}


					}




				}
			}

			.bottom {
				.sell-box {
					margin-top: 24rpx;

					.sell-box-name {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #4E5969;
						line-height: 39rpx;
					}

					.sell-box-name2 {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 39rpx;
					}
				}

				.time-box {
					margin-top: 24rpx;

					.time {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #86909C;
						line-height: 39rpx;
					}

					.detail {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #276AEE;
						line-height: 39rpx;
					}
				}

			}




		}

	}
</style>